<!-- 考试情况 -->
<template>
    <div class="test-state">
        <div class="task-history" v-if="from == 'test'" @click="historyMaskShow=true">查看历史数据</div>
        <div class="state-con">
            <div class="state-top">
                <ul class="tab-box clearfix">
                    <li class="left" v-for="(item,index) in tabList" :key="index" >
                        <p :class="{'ischose':tabIndex==index}" @click="tabChose(index)">{{item}}</p>
                        <i v-show="tabIndex==index"></i>
                    </li>
                </ul>
                <div class="btn-class" @click="classMaskShow=true">{{thisClass.name}}</div>
            </div>
            <ul class="state-list">
                <li v-for="(item,index) in showList" :key="index" class="clearfix" @click="goState(item,index)">
                    <img class="state-avatar left" :src="item.Avatar ? item.Avatar: $parent.headError" :onerror="$parent.headError" alt="">
                    <div class="state-info left">
                        <div class="state-name clearfix">
                            <span class="left">{{item.TrueName}}</span> 
                            <i class="left" v-show="!item.isComplate">未完成</i>
                        </div>
                        <div class="state-data">
                            <span>答对：{{item.rightCount}}题</span>&nbsp;&nbsp;&nbsp;
                            <span>答错：{{item.answerQuestionCount-item.rightCount}}题</span>&nbsp;&nbsp;&nbsp;
                            <span>正确率：{{item.answerQuestionCount ? Math.round((item.rightCount/item.answerQuestionCount)*100) : 0}}%</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 选班级 -->
        <ClassMask :classMaskShow="classMaskShow" :classChose="classChose" :classList="classList" @classClose="classMaskShow=false" @classChoseFun="classChoseFun"></ClassMask>
        <!-- 选择时间遮罩 -->
        <History v-show="historyMaskShow" :historyMaskShow="historyMaskShow" :choseIndex="choseIndex"  @choseFun="choseFun" @pickerClose="historyMaskShow=false"></History>
    </div>
</template>

<script>
import {axGet} from '@/api/index'
import { getTimeStr } from '@/assets/js/base'
import ClassMask from '@/components/ClassMask' 
import History from '@/components/History'

export default {
    name: "testState",
    components:{
        ClassMask,
        History,
    },
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            from:this.$route.query.from,
            bookid:this.$route.query.bookid,
            tabIndex:0,
            tabList:['全部','已完成','未完成'],
            showList:[],
            stateList:[],
            complete:[],
            incomplete:[],
            hasHistory:false,
            historyList:[],  //历史任务列表
            // 选班
            classList:[],
            thisClass:{},
            classChose:0,
            classMaskShow:false,
           // 选择器
            historyMaskShow:false,
            choseIndex:0,
            historyIndex:this.$route.query.index,
            resultstr:'',
            slots: [],
            taskDateList:[],
            pcaValue:'',
        }
    },
    watch:{
        classMaskShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
        historyMaskShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created(){ 
        this.$parent.menuShow=false;
    },
    mounted(){
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            if(this.from == 'test'){
                this.choseIndex=this.historyIndex
                this.historyList=JSON.parse(sessionStorage.historyList) 
                
                this.taskClass(this.historyList[this.historyIndex])
            }else{
                this.getTaskInfo()
            }
            
        }
    
    },
    methods:{
        goReturn(){
            this.$router.go(-1)
        },
        // 请求任务信息
        getTaskInfo(){
            axGet('GetBookCheckInTask', {
                userId:this.userid,
                bookid:this.bookid,
            }).then(res => {
                if(res.ResultCode==1){
                    this.taskClass(res.Value)
                }
            })
        },
        taskClass(task){
            console.log(task)
            this.task=task
            //班级
            let classcodeArr=this.task.checkInObject.split(',');
            let classnameArr=this.task.ClassName.split('·');
            let hasChose=false;
            let saveClass=sessionStorage.getItem("thisClass") ? JSON.parse(sessionStorage.getItem("thisClass")) : {}
            classcodeArr.forEach((code,i) => { 
                if(saveClass && saveClass.code==code){
                    hasChose=true
                }
                let list={
                    code:code,
                    name:classnameArr[i],
                }
                this.classList.push(list)
            });
            if(hasChose){
                this.classChose=parseInt(sessionStorage.getItem("classChose"))
                this.thisClass=saveClass
            }else{
                this.thisClass=this.classList[0]
            }
            console.log(this.thisClass)
            this.getList(this.thisClass.code)
        },
        // 班级情况
        getList(code){
            axGet('GetBookClassAnswerLog',{
                userId:this.userid,   
                bookId:this.bookid, 
                taskid:this.task.taskId,
                classCode:code,
            }).then(res => {
                if(res.ResultCode===1){
                    this.stateList=res.Value
                    this.stateList.forEach((item)=>{
                        if(item.isComplate){
                            this.complete.push(item)
                        }else{
                            this.incomplete.push(item)
                        }
                    })
                    if(this.tabIndex==0){
                        this.showList=this.stateList
                    }else if(this.tabIndex==1){
                        this.showList=this.complete
                    }else if(this.tabIndex==2){
                        this.showList=this.incomplete
                    }
                }
            })
        },
        // 去考试详情
        goState(item,index){
            if(item.isComplate){
                axGet('GetBookQuestionAnswerLog',{
                    userId:item.userId,
                    bookId:this.bookid,
                    taskid:this.task.taskId,
                }).then(res => {
                    if(res.ResultCode === 1){
                        if(res.Value && res.Value.lastAnswerRecord){//有挑战记录
                            sessionStorage.setItem("questionList",res.Value.lastAnswerRecord)
                            sessionStorage.setItem("studentInfo",JSON.stringify(item))
                            this.$router.push({path:'/challengeEnd',query: {studentid:item.userId,bookid:this.bookid,rightcount:item.rightCount,from:'test'}});
                        }else{
                            this.$LayerTip({
                                content:"该学生未完成考试",
                                time:1000,
                            });
                        }
                    }
                })                
            }else{
                this.$LayerTip({
                    content:"该学生未完成考试",
                    time:1000,
                });
            }

        },
        tabChose(index){
            this.tabIndex=index 
            if(this.tabIndex==0){
                this.showList=this.stateList
            }else if(this.tabIndex==1){
                this.showList=this.complete
            }else if(this.tabIndex==2){
                this.showList=this.incomplete
            }
        },
        // 班级选择
        classChoseFun(item,index){
            if(this.classChose!=index){
                this.classChose=index
                this.thisClass=item
                sessionStorage.setItem("classChose",index)
                sessionStorage.setItem("thisClass",JSON.stringify(item))
                this.complete=[]
                this.incomplete=[]
                this.getList(item.code)
                
                this.classMaskShow=false;
            }
        },
        // 选时间段
        choseFun(item,index){
            if(item.taskCategory==2){
                if(this.choseIndex==index){
                    this.historyMaskShow=false;
                }else{
                    this.choseIndex=index;
                    this.complete=[]
                    this.incomplete=[]
                    this.classList=[]
                    this.taskClass(item)
                    this.historyMaskShow=false;
                }
            }else{
                this.$router.replace({path:'/history',query: {bookid:this.bookid, index:index, from:'test'}}); 
            } 
        },
        pickerClose(){
            this.historyMaskShow=false;
        },
    }
}
</script>
<style type="text/css" scoped>
.task-history{
    height: 1rem;
    line-height: 1rem;
    font-size: 0.32rem;
    background: #f7f7f7 url(~@/assets/img/icon/arrow-r-n.png) no-repeat center right 0.32rem;
    background-size: 0.16rem auto;
    padding-left: 0.32rem;
}

.state-con{
    padding: 0.34rem 0.32rem;
}
.state-top{
    position: relative;
}
.btn-class{
    line-height: 0.36rem;
    padding-right: 0.4rem;
    color: #02affe;
    font-size: 0.3rem;
    background: url(~@/assets/img/icon/change-blue.png) no-repeat right center;
    background-size: 0.28rem 0.28rem;
    position: absolute;
    top: 0.04rem;
    right: 0;
}
.tab-box li{
    font-size: 0.34rem;
    color: #999;
    margin-right: 0.62rem;
}
.tab-box .ischose{
    color: #333;

}
.tab-box li i{
    display: block;
    height: 0.1rem;
    background: #00cd86;
    border-radius: 0.06rem;
    margin-top: 0.2rem;
}
.state-list{
    padding: 0.5rem 0.1rem 0;
}
.state-list li{
    margin-bottom: 0.62rem;
}
.state-avatar{
    width: 0.98rem;
    height: 0.98rem;
    border-radius: 50%;
    background: #ebeef2;
}
.state-info{
    padding-left: 0.38rem;
    padding-top: 0.1rem;
}
.state-name span{
    font-weight: bold;
    font-size: 0.4rem;
    margin: -0.08rem 0 0.08rem;
    /* line-height: 0.6rem; */
    max-width: 3.3rem;
    white-space:nowrap; 
    overflow: hidden;
    text-overflow:ellipsis;
    padding-right: 0.18rem;
}
.state-name i{
    font-size: 0.22rem;
    color: #fff;
    padding: 0.02rem 0.2rem;
    border-radius: 0.18rem;
    background: #ff9541;
}
.state-data{
    font-size: 0.28rem;
    color: #666;
}
</style>